import { createSlice, Dispatch } from '@reduxjs/toolkit';
import setGlobalState from '@/index';

export type globalItem = {
  theme: 'light' | 'dark';
  locale: 'ch' | 'en';
};

const globalItem: globalItem = {
  theme: 'light',
  locale: 'ch',
};

const globalSlice = createSlice({
  name: 'global',
  initialState: {
    globalItem: globalItem,
  },
  reducers: {
    setGlobalItem(state, { payload }) {
      state.globalItem = payload;
    },
    setGlobalTheme(state, { payload }) {
      state.globalItem.theme = payload;
      setGlobalState(state.globalItem);
    },
    setGlobalLocale(state, { payload }) {
      state.globalItem.locale = payload;
      setGlobalState(state.globalItem);
    },
  },
});

export let { setGlobalItem, setGlobalTheme, setGlobalLocale } =
  globalSlice.actions;

export default globalSlice.reducer;
